<template>
  <div>
    <TopFilter
      ref="topFilter"
      :list="topFilterList"
      :cols="3"
      @filterChange="changeHandle"
      @onCollapse="collapseHandle"
    ></TopFilter>

    <FilterTable
      ref="table"
      :isSelectColumn="true"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :onRowSelectChange="selectChange"
      :onColumnsChange="columns => this.columns = columns"
    >
    </FilterTable>

    <div style="text-align:center">
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="req">确 定</el-button>
        <el-button type="primary" @click="goback">取 消</el-button>
      </span>
    </div>
  </div>
</template>
<script>
import {
  queryCareTargetList
} from '@/api/customerCare/visitRules/manualCareTask';
import {
  getUserInfoByRole,
  getUserInfo
} from '@/api/customerCare/saleVisit/careTaskSearch';
import {
  queryClueSourceList
 } from '@/api/potenCus/customer/approval';
import { dictionary } from '@/utils/dictMixin';

export default {
  name: 'CareTask',
  mixins: [dictionary],
  components: {},
  data(){
    return {
      topFilterList: this.createTopFilters(),
      columns: this.createTableColumns(),
      fetchApi: queryCareTargetList,
      fetchParams: {xhrAbort: true},
      selectedRows: []
    }
  },
  created() {
    this.getClueTree()
  },
  methods: {
    createTopFilters(){
      return [
        {
          type: 'SELECT',
          label: '销售顾问',
          fieldName: 'consultant',
          placeholder: '请选择...',
          itemList: this.createdEmpList()
        },
        {
          type: 'INPUT',
          label: '客户编号',
          fieldName: 'potentialCustomerNo',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'customerName',
          placeholder: '请输入...'
        },
        {
          type: 'INPUT',
          label: '手机号',
          fieldName: 'mobilePhone',
          placeholder: '请输入...'
        },
        {
          type: 'SELECT',
          label: '客户类型',
          fieldName: 'customerType',
          placeholder: '请选择...',
          itemList: this.createDictList('1523')
        },
        {
          type: 'INPUT_TREE',
          label: '客户来源',
          fieldName: 'clueSourceId',
          placeholder: '请选择',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '意向级别',
          fieldName: 'intentLevel',
          placeholder: '请选择...',
          itemList: this.createDictList('1519')
        },
        {
          type: 'RANGE_DATE',
          label: '建档日期',
          fieldName: 'createdAt|createdAtEnd',
          format: "yyyy-MM-dd",
          placeholder: '建档日期'
        },
        {
          type: 'RANGE_DATE',
          label: '出库日期',
          fieldName: 'stockOutAtStart|stockOutAtEnd',
          format: "yyyy-MM-dd",
          placeholder: '出库日期'
        }
      ]
    },
    createTableColumns(){
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '客户编号',
          dataIndex: 'potentialCustomerNo',
          width: 125
        },
        {
          title: '客户名称',
          dataIndex: 'customerName'
        },
        {
          title: '手机号',
          dataIndex: 'mobilePhone'
        },
        {
          title: '销售顾问',
          dataIndex: 'consultantName'
        },
        {
          title: '建档日期',
          dataIndex: 'createdAt'
        },
        {
          title: '出库日期',
          dataIndex: 'stockInOutDate'
        },
        {
          title: '性别',
          dataIndex: 'gender',
          render: props => {
            return <div>{this.createDictText(props.row.gender, '1002')}</div>;
          }
        },
        {
          title: '出生日期',
          dataIndex: 'birthday'
        },
        {
          title: '客户类型',
          dataIndex: 'customerType',
          render: props => {
            return <div>{this.createDictText(props.row.customerType, '1523')}</div>;
          }
        },
        {
          title: '客户来源',
          dataIndex: 'clueSourceName'
        },
        {
          title: '意向级别',
          dataIndex: 'intentLevel',
          render: props => {
            return <div>{this.createDictText(props.row.intentLevel, '1519')}</div>;
          }
        }
      ]
    },
    createdEmpList(){
      //初始化关爱人员选择列表
      getUserInfo().then(res => {
        if(res.resultCode == 200){
          let param = {
            companyId:res.data.userInfo.companyId,
            positionCode:10061015
          };
          getUserInfoByRole(param).then(res => {
            if(res.resultCode == 200){
              this.topFilterList[0].itemList = res.data.map(x => ({ value: x.userId, text: x.employeeName }))
            }else{
              this.$message.error('获取关爱人员列表失败!');
            }
          })
        }else{
          this.$message.error('获取当前登录用户信息失败!');
        }
      })
    },
    closeHandler(val, type) {
      this.visible = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    async getClueTree() {
      const res = await queryClueSourceList();
      console.log('潜客来源', res)
      if (res.resultCode === 200) {
        let treeList = res.data
        treeList.forEach(el => {
          el.text = el.clueName;
          el.value = el.id;
          el.parentId = el.parentId;
        });

        this.topFilterList.find(item => item.fieldName ==='clueSourceId').itemList = treeList
      }
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    dateStrToLong(date){
      date = date.substring(0,19);
      date = date.replace(/-/g,'/');
      return new Date(date).getTime();
    },
    changeHandle(data) {
      let i = 0;
      this.topFilterList.forEach(item=>{
        if(item.initialValue != null && item.initialValue != ""){
          i++;
        }
      });
      if(i>=2){
        this.fetchParams = Object.assign({}, data);
      }else{
        this.$message.error('最少选择两个查询条件');
      }
    },
    selectChange(rows){ //选中时触发的函数
      this.selectedRows = rows;
    },
    req(){
      if (this.selectedRows.length === 0) {
        this.$message.error('请选择一个问题');
        return;
      };
      this.$emit('fatherReq', this.selectedRows)
    },
    goback() {
      this.$emit('fatherGoBack');
    }
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  }
}
</script>

<style lang="less">
</style>
